
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Ribbon Menu With CSS3</title>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="Demo For Ribbon Menu With CSS3" />
        <meta name="keywords" content="Oto Website, css3, ribbon, menu, navigation"/>
        <link rel="shortcut icon" href="http://i1263.photobucket.com/albums/ii623/dek_rif/Blog/th_animated_favicon1.gif?t=1336135599" type="image/x-icon"/> 
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<style>
* { 
        /* Basic CSS reset */
        margin:0; 
    padding:0;
}

body {
    /* These styles have nothing to do with the ribbon */
    background:url(http://3.bp.blogspot.com/-8Sq-kmEt-mY/T-_P8YTQWOI/AAAAAAAADvc/kW95bg5UJ5c/s1600/bb.png);
    margin:auto;
    text-align:center;
}
h1{
    color:#FFD204;
    font-size:40px;
    text-align:center;
    margin:5px 0px 10px 0px;
        text-transform:uppercase;
}
.msgboard
        {
            width: 660px;
            height: 500px;
            background-image: url(http://1.bp.blogspot.com/-3wYkdAn6-qg/T-_P6uVZbXI/AAAAAAAADvU/nDGjJQEhFcE/s1600/aa.png);
            background-repeat: no-repeat;
        margin:15px 0px 0px 0px;
            padding:100px 0px 0px  0px;
        }
.msgboardcontent
        {
            width: 500px;
            height: 350px;
        margin:auto;
            text-align:left;
        }
#judul
        {
            font-size: 13pt;
            font-family: Comic Sans MS;
            font-weight: bold;
        }
.judul
        {
            font-family: Cooper Black;
            color:Maroon;
            font-size: 17pt; 
        }
span.reference{
        float:left;
        text-transform:uppercase;
        font-weight: bold;
    font-family:Arial;
    display:block;
    font-size:17px;
    text-align:center;
    margin-top:-30px;
    margin-bottom:10px;
}
span.reference a{
    color:#FFD204;
    text-transform:uppercase;
    text-decoration:none;
    margin:0px 20px;
}
span.reference a:hover{
    color:#0dc3ff;
}
span.back{
        float:right;
        text-transform:uppercase;
        font-weight: bold;
    font-family:Arial;
    display:block;
    font-size:17px;
    text-align:center;
    margin-top:-30px;
    margin-bottom:10px;
}
span.back a{
    color:#FFD204;
    text-transform:uppercase;
    text-decoration:none;
    margin:0px 20px;
}
span.back a:hover{
    color:#0dc3ff;
}
    
    
.ribbon {
display:inline-block;
}
.ribbon:after, .ribbon:before {
margin-top:0.5em;
content: "";
float:left;
border:1.5em solid #01978C;
}
.ribbon:after {
border-right-color:transparent;
}
.ribbon:before {
border-left-color:transparent;
}
.ribbon a:link, .ribbon a:visited { 
color:#000;
text-decoration:none;
float:left;
height:3.5em;
overflow:hidden;
}
.ribbon span {
background:#01978C;
display:inline-block;
line-height:3em;
padding:0 1em;
margin-top:0.5em;
position:relative;
-webkit-transition: background-color 0.2s, margin-top 0.2s; /* Saf3.2+, Chrome */
-moz-transition: background-color 0.2s, margin-top 0.2s; /* FF4+ */
-ms-transition: background-color 0.2s, margin-top 0.2s; /* IE10 */
-o-transition: background-color 0.2s, margin-top 0.2s; /* Opera 10.5+ */
transition: background-color 0.2s, margin-top 0.2s;
}
.ribbon a:hover span {
background:#FFD204;
margin-top:0;
}
.ribbon span:before {
content: "";
position:absolute;
top:3em;
left:0;
border-right:0.5em solid #9B8651;
border-bottom:0.5em solid #01978C;
}
.ribbon span:after {
content: "";
position:absolute;
top:3em;
right:0;
border-left:0.5em solid #9B8651;
border-bottom:0.5em solid #01978C;
}    
</style>
    </head>
    <body>
    <h1>Ribbon Menu With CSS3</h1>
            <h1>http://www.otowebsite.blogspot.com</h1>

        <div class='ribbon'>
            <a href='http://otowebsite.blogspot.com/'><span>Home</span></a>
            <a href='#'><span>PTC</span></a>
            <a href='#'><span>Template</span></a>
            <a href='#'><span>Software</span></a>
            <a href='#' ><span>Tools</span></a>
            <a href='#'><span>Services</span></a>
            <a href='#'><span>Contact</span></a>
            </div>
       <center>
                <div class="msgboard">
                    <div id="judul" class="msgboardcontent">
                    <span class="judul">Oto Website Site Information</span></br>
                    ----------------------------------------------</br>
                    1. Free Download Template</br>
                    2. Free Download Software</br>
                    3. Blogger Tutorial, Blogger Trick and more</br>
                    4. Info, News, Computer, and more</br></br>
                    <span class="home">If You Want to Visit Oto Website</span></br>
                    ----------------------------------------------</br>
                    URL/Link: <a href="http://otowebsite.blogspot.com/" target="_blank">http://otowebsite.blogspot.com</a></br>
                </div>
       </center>
            <span class="reference">
                <a href="http://otowebsite.blogspot.com/">Copyright 2012 By Oto Website</a>
            </span>
            <span class="back">
                <a href="http://otowebsite.blogspot.com/2012/07/ribbon-menu-with-css3.html">Back To Oto Website Tutorial</a>
            </span>
    </body>
                    
                    
                    
                    
 <script type="text/javascript">
var snowsrc      = "http://2.bp.blogspot.com/-6yjsKoliL_Q/TwlTuQtV3WI/AAAAAAAAB6k/VyKxfGKFBpM/s1600/daun-kecil.png";  // Tentukan URL gambar daun/salju
var no           = 20;  // Tentukan jumlah daun/salju
var hidesnowtime = 0;  // Menentukan apakah daun/salju harus menghilang setelah x detik (0 = tidak pernah)
var snowdistance = "pageheight";  // Menentukan berapa banyak daun/salju yang harus jatuh sebelum akhirnya menghilang ("windowheight" atau "pageheight")
</script>
<script type="text/javascript" src="http://otowebsite.googlecode.com/files/snow.js"></script>                   
</html>